<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>Bitmap - Hilo Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
    <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
</head>
<body onload="init();">
    <div id="header">
        <h1>Bitmap</h1>
        <p>Bitmap是Hilo中最常用的类之一，它表示一个静态位图，对应一个Image或Image的某个矩形区域。</p>
    </div>
    <div id="game-container"></div>
    <script type="text/javascript" src="js/demo.js"></script>
    <script type="text/javascript">
		 var Tween = Hilo.Tween;
		 var Ease = Hilo.Ease;
        function init(){
            //init stage
            var stage = new Hilo.Stage({
                renderType:renderType,
                container: gameContainer,
                width: stageWidth,
                height: stageHeight
            });

            //start stage ticker
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
			ticker.addTick(Hilo.Tween);
            ticker.start();

            //create a bitmap
            var bmp = new Hilo.Bitmap({
                image: 'images/fish.png',
                rect: [0, 0, 174, 126],
                x: 75,
                y: 50,
				rotation:0,
            }).addTo(stage);
			
			Hilo.Tween.to(bmp, {x:150, y:150}, {
			    duration: 2000,
				reverse:true,
			    onUpdate: onUpdateTransform,
			    onComplete: runLink
			});
			
			function runLink(){
				Hilo.Tween.to(bmp, {x:150, y:150,rotation:180}, {
				    duration: 1000,
				    onUpdate: onUpdateTransform,
					//ease:Hilo.Ease.Quad.EaseIn,
					onComplete:function(){
						console.log("123")
						if(bmp.scaleX == 1)
							bmp.scaleX=-1
						else
							bmp.scaleX=1
					}
				})
				.link(Hilo.Tween.to(bmp, {x:50, y:50,rotation:-180}, {
				    duration: 1000,
				    onUpdate: onUpdateTransform,
					//ease:Hilo.Ease.Quad.EaseIn,
				    delay:'+0',
					onComplete:function(){
						if(bmp.scaleX == 1)
							bmp.scaleX=-1
						else
							bmp.scaleX=1
						runLink()
					}
				}))
				
			}
			
			
			// Hilo.Tween.to(bmp, {x:150, y:150}, {
			//     duration: 2000,
			//     // stagger: 20,
			//     ease: Ease.Back.EaseInOut,
			// 	loop:true, 
			// 	reverse:true,
			//     onUpdate: onUpdate
			// });
			window.tweens = Tween._tweens.slice();
        }
		function onUpdate(ratio, tween){
				tween.rotation=180
		    // tween.target.style.webkitTransform = 'translate(0,' + tween.target.y + 'px)';
		}
		function onUpdateTransform(ratio, tween){
			//bmp.rotation=180
			//bmp.scaleX *= -1;
			//console.log(tween)
		    //tween.target.style.webkitTransform = 'translate(' + tween.target.x + 'px,' + tween.target.y + 'px)';
			//tween.target.style.transform = 'translate(' + tween.target.x + 'px,' + tween.target.y + 'px)';
		}
    </script>
</body>
</html>